<template>
  <div class="satisfaction">
    <h5>满意度内容设置</h5>
    <satisfactionList ref="crsListRef" :showLoading="showLoading" :tableData="tableData" :defaultIndex="defaultIndex"></satisfactionList>
    <h5 class="setting">满意度设置</h5>
    <setting :type="'setting'" :settingData="settingData"></setting>
    <div class="btn fr">
      <el-button type="primary" size="mini" @click="saveCsrFun">保存</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import satisfactionList from '@/views/config/webchat/globalSetting/satisfaction/satisfactionList.vue'
import setting from '@/views/config/webchat/globalSetting/satisfaction/setting.vue'
import { BasicModule } from '@/store/modules/config/basic'
import { deepClone } from '@/utils/common'
@Component({
  name: 'satisfaction',
  components: { satisfactionList, setting }
})
export default class Satisfaction extends Vue {
  @Ref() private readonly crsListRef !: satisfactionList
  private $message: any

  private showLoading = false

  private tableData = []

  private defaultIndex = 1

  private settingData: any = {}

  private saveCsrFun () {
    this.$nextTick(() => {
      const defaultIndex = this.crsListRef.defaultRadio
      this.tableData.forEach((item: any) => {
        item.defaultIndex = defaultIndex
      })
      const {
        _id,
        name,
        type,
        satisfyTitle,
        satisfyThank,
        isAging,
        agingTimeout,
        isSystemClosePushCsr,
        isAgentClosePushCsr,
        isCustomerClosePushCsr,
        isAgentPushCsr,
        isCustomerPushCsr
      } = this.settingData
      const sendData = {
        _id,
        name,
        type,
        satisfyTitle,
        satisfyThank,
        isAging,
        agingTimeout: Number(agingTimeout),
        isSystemClosePushCsr,
        isAgentClosePushCsr,
        isCustomerClosePushCsr,
        isAgentPushCsr,
        isCustomerPushCsr,
        radioTagText: this.tableData
      }
      const actionData = { url: '/im-center/action/config/satisfaction/update', method: 'POST', data: sendData }
      BasicModule.BasicCommonAction(actionData).then(res => {
        if (res && res.success) {
          this.$message.success('保存成功')
        }
      })
    })
  }

  private mounted () {
    const actionData = { url: '/im-center/action/config/satisfaction/list', method: 'POST', data: {} }
    this.showLoading = true
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success && res.data && res.data.list[0]) {
        this.tableData = deepClone(res.data.list[0].radioTagText) || []
        this.defaultIndex = res.data.list[0].radioTagText[0].defaultIndex || 1
        this.settingData = res.data.list[0] || {}
        this.showLoading = false
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .satisfaction
    padding 24px
    border-radius 10px
    height calc(100% - 40px)
    overflow auto
    box-sizing border-box
    margin 0 2px 2px 0
    border 1px solid #ecf0f3
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    .setting
      margin-top 40px
</style>
